<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>银行系统 - 贷款审批</title>
<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h2 {
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f5f5f5;
}

button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.approve-btn {
    background-color: #2196F3;
}

.approve-btn:hover {
    background-color: #0b7dda;
}

.reject-btn {
    background-color: #f44336;
}

.reject-btn:hover {
    background-color: #d32f2f;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
</style>
</head>
<body>
    <h2>待审批贷款申请</h2>
    
    <table>
        <tr>
            <th>贷款ID</th>
            <th>贷款编号</th>
            <th>申请人</th>
            <th>金额</th>
            <th>申请时间</th>
            <th>操作</th>
        </tr>
        <!-- 使用JSTL遍历待审批贷款列表 -->
        <c:if test="${not empty loans}">
            <c:forEach items="${loans}" var="loan">
                <tr>
                    <td>${loan.id}</td>
                    <td>${loan.loanNumber}</td>
                    <td>${loan.user.realName}</td>
                    <td>${loan.amount}</td>
                    <td>${loan.createTime}</td>
                    <td>
                        <button class="approve-btn" onclick="openApproveModal(${loan.id}, 'approve')">批准</button>
                        <button class="reject-btn" onclick="openApproveModal(${loan.id}, 'reject')">拒绝</button>
                    </td>
                </tr>
            </c:forEach>
        </c:if>
        <c:if test="${empty loans}">
            <tr>
                <td colspan="6">暂无待审批贷款</td>
            </tr>
        </c:if>
    </table>
    
    <div id="approveModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeApproveModal()">&times;</span>
            <h3 id="modalTitle">贷款审批</h3>
            <form id="approveForm">
                <input type="hidden" id="approveLoanId" name="loanId">
                <input type="hidden" id="approveAction" name="action">
                <div class="form-group" id="reasonGroup" style="display: none;">
                    <label for="reason">拒绝原因：</label>
                    <textarea id="reason" name="reason" rows="3"></textarea>
                </div>
                <button type="button" onclick="submitApproval()">提交</button>
            </form>
        </div>
    </div>

    <script>
    function openApproveModal(loanId, action) {
        document.getElementById("approveLoanId").value = loanId;
        document.getElementById("approveAction").value = action;
        
        if (action === "reject") {
            document.getElementById("modalTitle").textContent = "拒绝贷款申请";
            document.getElementById("reasonGroup").style.display = "block";
        } else {
            document.getElementById("modalTitle").textContent = "批准贷款申请";
            document.getElementById("reasonGroup").style.display = "none";
        }
        
        document.getElementById("approveModal").style.display = "block";
    }
    
    function closeApproveModal() {
        document.getElementById("approveModal").style.display = "none";
    }
    
    function submitApproval() {
        var loanId = document.getElementById("approveLoanId").value;
        var action = document.getElementById("approveAction").value;
        
        // 拒绝时需要原因
        if (action === "reject") {
            var reason = document.getElementById("reason").value;
            if (!reason.trim()) {
                alert("请输入拒绝原因");
                return;
            }
        }
        
        // 使用AJAX提交审批
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "approveLoan", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                alert(xhr.responseText);
                location.reload();
            }
        };
        
        var params = "loanId=" + loanId + "&action=" + action;
        if (action === "reject") {
            params += "&reason=" + encodeURIComponent(document.getElementById("reason").value);
        }
        
        xhr.send(params);
        closeApproveModal();
    }
    </script>
</body>
</html>